<!-- pages/party/[type]/[id].vue -->
<template>
    <MainLayout :breadcrumbItems="breadcrumbItems" :neighbors="neighbors" :article="articleData">
        <template #content>
            <article class="article-detail">

                <!-- 正文内容 -->
                <section class="article-content">
                    <div class="content-text" v-html="articleData.text"></div>
                    <div class="video-wrapper" v-if="articleData.video">
                        <video ref="videoPlayer" class="video-element" :poster="articleData.poster" controls>
                            <source :src="articleData.video" type="video/mp4">
                        </video>
                    </div>
                </section>

                <!-- 附件下载 -->
                <div v-if="articleData.fileList.length>0" class="attachments">
                    <h3 style="font-size: 1rem;">相关附件</h3>
                    <ul>
                        <li v-for="file in articleData.fileList" :key="file.name">
                            <a :href="file.url" download target="_blank">
                                 {{ file.name }}
                            </a>
                        </li>
                    </ul>
                </div>
            </article>
        </template>
    </MainLayout>
</template>

<script setup>
//   import { format } from 'date-fns'
import MainLayout from '@/components/detailPage.vue'

const { $fetchGov,$fetchAuth } = useNuxtApp()
const route = useRoute()
const router = useRouter()
const articleData = ref(null)
const userStore = useUserStore()

// 获取文章浏览次数
await $fetchGov(`/app/api/article/view/${route.params.id}`,{method: 'GET'})

// 获取文章数据
const { data: article, refresh: refreshArticle } = await useAsyncData(
    `party-article-${route.params.id}`,
    async () => {
        const fetchMethod = userStore.user ? $fetchAuth : $fetchGov
        
        return await fetchMethod(`/app/api/article/${route.params.id}`,{
            method: 'GET'
        })
    },
    { watch: [() => route.params.id] }
)

// 添加路由变化监听
watch(() => route.params.id, async (newId) => {
    if (newId) {
        await refreshArticle()
    }
})

articleData.value = article.value.data

const { data: prev } = await useAsyncData(
    `party-prev`,
    async () => {
        return await $fetchGov(`/app/api/article/prev`,{
            method: 'GET',
            params: { id: route.params.id, channel: route.params.type, order: articleData.value?.order },
        })
    }
)

const { data: next } = await useAsyncData(
    `party-next`,
    async () => {
        return await $fetchGov(`/app/api/article/next`,{
            method: 'GET',
            params: { id: route.params.id, channel: route.params.type, order: articleData.value?.order },
        })
    }
)

const neighbors = computed(() => {
    return {
        prev: prev.value.data && prev.value.data.id ? { 
            id: prev.value.data.id, 
            title: prev.value.data.title, 
            nav:'party',
            category: route.params.type 
        } : null,
        next: next.value.data && next.value.data.id ? { 
            id: next.value.data.id,
            title: next.value.data.title,
            nav:'party',
            category: route.params.type
        } : null
    }
})

// 面包屑导航
const breadcrumbItems = computed(() => [
    { title: '首页', path: '/' },
    { title: '党务引领', path: '/party' },
    {
        title: route.params.type === 'news' ? '最新新闻' : route.params.type === 'notice' ? '通知公告' : route.params.type === 'activity' ? '活动信息' : route.params.type === 'work'?'党务工作':'活动花絮',
        path: `/party/${route.params.type}`
    },
    { title: article.value.data.title }
])


// SEO优化
useHead({
    // title: `${article.value.title} - 云南省健康与发展研究会`,
    meta: [
        {
            name: 'description',
            // content: article.value.summary || article.value.title
        },
        {
            property: 'og:image',
            // content: article.value.cover || '/images/og-default.png'
        }
    ]
})
</script>

<style lang="scss" scoped>
@use '@/assets/scss/main' as *;

.article-detail {

    .article-content {
        line-height: 1.8;
        font-size: 1.1rem;

        ::v-deep(img) {
            max-width: 100%;
            height: auto;
            margin: 1rem 0;
            border-radius: 4px;
        }

        ::v-deep(table) {
            width: 100%;
            margin: 1rem 0;
            border-collapse: collapse;

            td,
            th {
                padding: 0.8rem;
                border: 1px solid #ddd;
            }
        }
        .content-text {
            margin-bottom: 1rem;
        }
        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            border-radius: .5rem;
            overflow: hidden;
            .video-element {
                position: absolute;
                width:100%;
                height: 100%;
            }
        }
    }

    .attachments {
        margin-top: 3rem;
        padding-top: 1rem;
        // border-top: 1px solid #eee;

        h3 {
            color: #333;
            margin-bottom: .2rem;
        }

        li {
            padding: 0.5rem 0;
            list-style-type: none;

            a {
                color: #1867CA;
                text-decoration: none;
                display: flex;
                align-items: center;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .article-actions {
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 1px solid #eee;
        text-align: center;
    }
}

.gov-button {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    background: #1867CA;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s;

    &:hover {
        opacity: 0.9;
    }
}

@media (max-width: 768px) {
    .article-detail {
        padding: 0;
    }
}
</style>